<script lang="ts" setup>
import { inject, ref, type Ref } from 'vue';

// 子子组件
// 2. inject 函数类似鸿蒙的 @Consume 装饰器，后代组件接收数据
// const totalCount = inject<number>('totalCount',0)

// inject 第二个参数为数据的默认值，提供默认值后，这个 undefined 类型就可以被移除
// Ref<number> 为 ref() 函数返回值的类型，导入类型是 type Ref
  const totalCount = inject<Ref<number>>('totalCount',ref(0))
  
  const updateTotalCount = inject('updateTotalCount',(num:number)=>{}) 
</script>

<template>
  <div class="son-son-com">
    <h3>后代{{ totalCount }}</h3>
    <button @click="totalCount++">后代数据+1</button>
    <button @click="updateTotalCount(10)">调用回调函数+10</button>
  </div>
  
</template>